<!--
 * @Author: xuxueliang
 * @Date: 2022-05-24 14:50:13
 * @LastEditTime: 2022-06-12 21:24:14
 * @LastEditors: xuxueliang
 * @Description: 
-->
@@include('tophead.html',{ "title":"首页", "bodyClass":"" })
@@include('header.html', { "type": "black","buttonClass":"toLink"})
<div class="bsbb por detail-page main-page">
  <div class="bk-fixed">
    <div class="por">
      <div class="swiper-container swiper-container3">
        <div class="swiper-wrapper">
          <!-- 图片和title需要渲染到 里 -->
          <div swiper-title="带发生" class="swiper-slide" style="">
            <div class="swiper-zoom-container">
              <img src="http://i.cafa.edu.cn/sub_events/media/mid_img/20215182219540.jpg" alt="" />
            </div>
          </div>
          <div swiper-title="第一个" class="swiper-slide" style="">
            <div class="swiper-zoom-container">
              <img src="http://i.cafa.edu.cn/sub_events/media/mid_img/20215182219540.jpg" alt="" />
            </div>
          </div>
          <div swiper-title="第二个" class="swiper-slide" style="">
            <div class="swiper-zoom-container">
              <img src="http://i.cafa.edu.cn/sub_events/media/mid_img/20215182219540.jpg" alt="" />
            </div>
          </div>
        </div>
        <!-- Add Pagination -->
        <!-- <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div> -->
      </div>
      <div class="top-fixed font-B poa row">
        <span id="nownum"></span>/<span id="allnum"></span>
        <img src="./assets/public/images/logo-t-black.png" class="logo" alt="" />
        <div class="right close"></div>
      </div>
      <div class="bottom-fixed poa row">
        <span id="names"></span>
      </div>
    </div>
    <div class="share-fu">
      <img src="./static/public/images/sharebk.png" alt="" />
    </div>
  </div>
</div>
<div class="moyan-title tac wow fadeInUp">
  <p>艺术学系 | 中文系</p>
</div>
<!-- <div class="w100 posr wow fadeInUp video-play-action moyan">
  <div class="play wh100 bg-cover posa pos-center"></div>
  <video
  playsinline='false' webkit-playsinline='false'
    src="./assets/public/images/1、李旭拍摄的电影傍晚向日葵片花.mp4"
    poster="./assets/public/images/video.png"
    controls
    id="iVideo"
    class="wh100"
  ></video>
</div> -->
<a class="img-show-div wow fadeInUp moyan">
  <img class="" src="./assets/public/images/111111.jpg" alt="" />
</a>
<div class="moyan-jiyu nowrap">莫言寄语</div>
<div class="detailsVideo detail-de detail-de-1 flex">
  <div class="dv-main-no">
    <div class="detail-items">
      <a class="img-show-div wow fadeInUp">
        <img class="" src="./assets/public/images/111111.jpg" alt="" />
      </a>
      <div class="title nowrap mb8 wow fadeInUp">名师大讲堂——从说书人到文人</div>
      <div class="desc wow fadeInUp">
        <p class="nowrap wow fadeInUp">主讲人：莫言</p>
      </div>
    </div>
    <div class="detail-items">
      <a class="img-show-div wow fadeInUp">
        <img class="" src="./assets/public/images/111111.jpg" alt="" />
      </a>
      <div class="title nowrap mb8 wow fadeInUp">名师大讲堂——从说书人到文人</div>
      <div class="desc wow fadeInUp">
        <p class="nowrap wow fadeInUp">主讲人：莫言</p>
      </div>
    </div>
    <div class="detail-items">
      <a class="img-show-div wow fadeInUp">
        <img class="" src="./assets/public/images/111111.jpg" alt="" />
      </a>
      <div class="title nowrap mb8 wow fadeInUp">名师大讲堂——从说书人到文人</div>
      <div class="desc wow fadeInUp">
        <p class="nowrap wow fadeInUp">主讲人：莫言</p>
      </div>
    </div>
    <div class="detail-items">
      <a class="img-show-div wow fadeInUp">
        <img class="" src="./assets/public/images/111111.jpg" alt="" />
      </a>
      <div class="title nowrap mb8 wow fadeInUp">名师大讲堂——从说书人到文人</div>
      <div class="desc wow fadeInUp">
        <p class="nowrap wow fadeInUp">主讲人：莫言</p>
      </div>
    </div>
  </div>
</div>
@@include('footer.html')
<script>
  $(function () {
    videoInit({ videoId: "iVideo", buttonId: "iVideoPlay" });
  });
  var click = false;
  var swiper2 = new Swiper(".swiper-container3", {
    zoom: true, //开启缩放功能
    // navigation: {
    //   nextEl: ".swiper-button-next",
    //   prevEl: ".swiper-button-prev",
    // },
    on: {
      slideChange: function () {
        $("#nownum").text(this.activeIndex + 1);
        $("#names").text($(this.slides[this.activeIndex]).attr("swiper-title"));
      },
      init: function (swiper) {
        //Swiper初始化了
        $("#nownum").text(this.activeIndex + 1);
        $("#allnum").text(this.slides.length);
        $("#names").text($(this.slides[this.activeIndex]).attr("swiper-title"));

        // alert("当前的slide序号是" + this.activeIndex); //或者swiper.activeIndex，swiper与this都可指代当前swiper实例
        // this.emit("transitionEnd"); //在初始化时触发一次transitionEnd事件，需要先设置transitionEnd
      },
      click: function (swiper, event) {
        // $(".bk-fixed").hide();
        if (!click && event.target.className.indexOf("swiper-button") < 0) {
          click = setTimeout(function () {
            hideBg();
            click = null;
          }, 300);
        } else {
          clearTimeout(click);
          click = null;
        }
        // event.stopPropagation()
        // return false
      },
    },
  });
  // 需要知道点击的是第几个图片
  $(".detailsVideo .img-show-div img").click(function () {
    click = setTimeout(function () {
      click = null;
    }, 300);
    showBg($(".detailsVideo .img-show-div img").index($(this)));
  });
  function showBg (index) {
    $(".bk-fixed").show();
    swiper2.update();
    swiper2.slideTo(index, 0);
    $("#nownum").text(swiper2.activeIndex + 1);
    $("#allnum").text(swiper2.slides.length);
    $("#names").text(
      $(swiper2.slides[swiper2.activeIndex]).attr("swiper-title")
    );
    $("body").addClass("oh");
  }
  function hideBg () {
    $(".bk-fixed").hide();
    if (swiper2.zoom.scale > 1) {
      swiper2.zoom.toggle();
    }
    // swiper && swiper.autoplay.start();
    setTimeout(function () {
      $("body").removeClass("oh");
    }, 300);
  }
  $(".bk-fixed .close").click(function () {
    hideBg();
  });
  $(".swiper-container1").click(function (e) {
    if ($(e.target).hasClass("no-event")) {
    } else {
      showBg(swiper.activeIndex - repeat);
    }
  });
  var isWillCanHide = false;
  var touch = { start: { x: 0, y: 0 }, end: { x: 0, y: 0 }, distance: 0 };
  $(".bk-fixed").on("touchstart", function (e) {
    if (e.originalEvent.changedTouches.length < 2) {
      isWillCanHide = true;
      touch.start.x = e.originalEvent.changedTouches[0].clientX;
      touch.start.y = e.originalEvent.changedTouches[0].clientY;
    } else {
      isWillCanHide = false;
    }
  });

  $(".bk-fixed").on("touchmove", function (e) {
    if (isWillCanHide) {
      touch.end.x = e.originalEvent.changedTouches[0].clientX;
      touch.end.y = e.originalEvent.changedTouches[0].clientY;
      if (touch.can === undefined) {
        if (
          Math.abs(touch.end.y - touch.start.y) >
          Math.abs(touch.end.x - touch.start.x)
        ) {
          touch.can = true;
        } else {
          touch.can = false;
          isWillCanHide = false;
        }
      }
      if (isWillCanHide) {
        touch.distance = Math.abs(touch.start.y - touch.end.y);
        $(".bk-fixed >.por").css({
          transition: "all 0s",
          transform:
            "translate3d(" +
            (touch.end.x - touch.start.x) +
            "px, " +
            -1 * (touch.start.y - touch.end.y) +
            "px, 0px) scale(" +
            (1 - touch.distance / window.innerHeight) +
            ")",
        });
        $(".bk-fixed ").css({
          transition: "all 0s",
          backgroundColor:
            "rgba(0,0,0," +
            (1 - Math.abs(touch.end.y - touch.start.y) / window.innerHeight) +
            ")",
        });
      }
    }
  });
  $(".bk-fixed").on("touchend", function (e) {
    $(".bk-fixed >.por").css({
      opacity: 1,
      transform: "translate3d(0,0,0) scale(1)",
      transition: "all 500ms",
    });
    $(".bk-fixed").css({
      backgroundColor: "rgba(0,0,0,1)",
      transition: "all 500ms",
    });
    if (isWillCanHide && touch.can && touch.distance > 100) {
      hideBg();
    }
    touch = { start: { x: 0, y: 0 }, end: { x: 0, y: 0 }, distance: 0 };
  });
  $(".share").click(function () {
    $(".share-fu").fadeIn();
  });
  $(".share-fu").click(function () {
    $(".share-fu").fadeOut();
  });
</script>
@@include('bottomhtml.html')